<!DOCTYPE html>
<html lang="zh-cn">
	<head>
		<meta charset="utf-8" />
		<title>HTML前端学习</title>
		<meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com" />
		<meta name="copyright" content="www.doyoe.com" />
		<style>
			
			.container{
				border: solid 1px black;
				width: 300px;
				height: 300px;
				
			}
			
			
			@keyframes slideout{
				/* from{
					background-color:red;
					width: 300px;
					height: 300px;
				}
				to{
					background-color:#fff;
					width: 0;
					height: 0;
					
				} */
				
				
				
				0%{
					background-color:black;
					
				}
				
				50%{
					background-color:red;
					
				}
				
				100%{
					background-color:#fff;
				
					
				} 
				
				
			}
			
			
			.myan{
				/* 哪一个动画 */
				animation-name:slideout;
				/* 持续时间 */
				animation-duration:6s;
			}
		
		</style>
	</head>
	<body>




	<div class="container ">
		我是大段的内容我是大段的内容我是
	
	</div>
	




	</body>
</html>